<template>
  <div class="app-container">
    <p
      style="
        width: 84px;
        height: 22px;
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 14px;
        color: #303133;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      "
    >
      通用材料建档
    </p>
    <Find :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findData1" :searchImg="false" @Launchform="Launchform1" />

    <div class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '0' }">
        <!-- card body -->

        <div class="MainBottom">
          <div class="MainCardLeft">
            <h1 class="MainCardLeftH1">部门资料</h1>
            <div class="MainCardDivMain">
              <el-tree
                :data="data"
                node-key="所有数据"
                :expand-on-click-node="false"
                :props="defaultProps"
                :default-expand-all="true"
                :show-checkbox="false"
                @node-click="handleNodeClick"
              />
            </div>
          </div>

          <div class="MainCardRight">
            <p
              style="
                width: 84px;
                height: 22px;
                font-family: Inter, Inter;
                font-weight: 500;
                font-size: 14px;
                color: #303133;
                line-height: 22px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              "
            >
              材料查询
            </p>
            <Find :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" @Launchform="Launchform" />
            <!-- <h1 class="MainCardLeftH1"></h1> -->
            <div style="margin-top: 15px">
              <beiyong
                :isLoading="isLoading"
                :tableHeader="tableHeader"
                :tableData="MaterialQueryTableDateList.materialQueryList"
                @currentRow="clicktogetdata1"
                @confirmChange="confirmChange1"
                :getTableList="MaterialQueryListKlc"
                :TableHeight="95"
                :outTableHeight="100"
              />
              <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'FormingMaterialFile1'
})
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {
  AThreeLevelListOfDepartmentData,
  GeneralMaterialFile,
  MaterialQueryList,
  venderName,
  deleteMaterials
} from '@/api/ControlDepartment/MaterialManagement/FormingMaterialFile'
import type {
  AThreeLevelListOfDepartmentDataInterface,
  GeneralMaterialFilePamrs,
  MaterialQueryListParms,
  MaterialQueryListInterface
} from '@/api/ControlDepartment/MaterialManagement/FormingMaterialFile'
import { UnitDefinition } from '@/api/ControlDepartment/MaterialManagement/MaterialAttributeDefinition'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '分类名称',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '名称1',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '名称2',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '名称3',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '规格',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '单位',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '供应商',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '材料颜色',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'input',
    inputPlaceholder: '物料编码',
    inputValue: '',
    inputWidth: '86px'
  },
  {
    type: 'button',
    checkboxLabel: '删除',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList2 = ref([
  {
    type: 'input',
    inputLabel: '分类',
    inputValue: '',
    inputDisabled: true
  },
  {
    type: 'input',
    inputLabel: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputLabel: '请输入规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputLabel: '请输入材料颜色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '请选择单位',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '请选择供应商',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '插入材料',
    bgColor: '#1890FF'
  }
])

const isLoading = ref(true)

const clicktogetdata1 = (row: any) => {
  const { mtlNo } = row || ''
  mtlNoString.value = mtlNo
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const handleCloseMateriaLKlc = (_done?: () => void) => {
  ElMessageBox.confirm('确定要删除该数据吗')
    .then(async () => {
      deleteTableDateList()
    })
    .catch(() => {})
}

const confirmChange1 = async (row: any) => {
  Number(row.area)
  Number(row.grossWeight)
  Number(row.netWeight)
  const result = await LoginWork.put<any, any>('/common/getMaterialUpdate', row)
  if (result.code === 200) {
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

// 删除
const mtlNoString = ref('')

const deleteTableDateList = async () => {
  const result = await deleteMaterials(mtlNoString.value)
  if (result.code === 200) {
    JMessage.success(result.message)
    MaterialQueryListKlc()
  } else JMessage.error(result.message)
}

// 单位定义
const UnitDefinitionList = async () => {
  const result = await UnitDefinition()
  const NewArraySelectList = result.reduce((arr: any, item: any) => {
    if (item.mtlSeq && item.mtlUnit) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.mtlUnit)
    }
    return arr
  }, [])
  formList2.value[4].selectOptions = EvaluatesTheArrayReturnValue(NewArraySelectList)
}

// 厂商
const VenderNameList = async () => {
  const result = await venderName()
  const NewArrayList = result.reduce((arr: any, item: any) => {
    if (item.vendorNo && item.vendorName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.vendorName + ' ' + item.vendorNo)
    }
    return arr
  }, [])

  formList2.value[5].selectOptions = EvaluatesTheArrayReturnValue(NewArrayList)
  formList1.value[6].selectOptions = EvaluatesTheArrayReturnValue(NewArrayList)
}

// 材料查询列表
const MaterialQueryListParm = ref<MaterialQueryListParms>({
  mtlColor: '',
  mtlName: '',
  mtlName1: '',
  mtlName2: '',
  mtlNo: '',
  mtlSpec: '',
  mtlUnit: '',
  pageNum: 1,
  pageSize: 40,
  typeName: '',
  vendor: ''
})

const MaterialQueryTableDateList = ref<MaterialQueryListInterface>({
  materialQueryList: []
})

const MaterialQueryListKlc = async () => {
  isLoading.value = true
  const result = await MaterialQueryList(MaterialQueryListParm.value)
  total.value = result.total!
  MaterialQueryTableDateList.value.materialQueryList = result.materialQueryList.map((item: any) => {
    item.change = 'Y'
    return item
  })
  isLoading.value = false
}

// 查询资料
const QueryDateParms = ref<GeneralMaterialFilePamrs>({
  mtlColor: '',
  mtlName: '',
  mtlNo: '',
  mtlSpec: '',
  mtlUnit: '',
  vendor: ''
})

const QueryDate = async () => {
  const result = await GeneralMaterialFile(QueryDateParms.value)
  if (result.code === 200) {
    MaterialQueryListKlc()
    clearFormList2()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

// 表格数据

const tableHeader = ref([
  {
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '分类名称',
    prop: 'typeName',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '供应商',
    prop: 'vendor',
    change: true
  },
  {
    label: '毛重',
    prop: 'grossWeight'
  },
  {
    label: '净重',
    prop: 'netWeight'
  },
  {
    label: '面积',
    prop: 'area'
  }
])

// 统一调用接口
const interAceFunct = () => {
  // 主表格
  DepartmentalData()

  MaterialQueryListKlc()

  // 厂商数据
  VenderNameList()

  // 单位数据
  UnitDefinitionList()
}

onMounted(() => {
  interAceFunct()
})

const DepartmentalData = async () => {
  try {
    let result = await AThreeLevelListOfDepartmentData()
    data.value = result
  } catch (error) {}
}

interface Tree {
  label: string
  children?: Tree[]
  deptName?: string
  deptNo?: string
  deptFlag?: string
  typeName?: string
  typeNo: string
}

const data = ref<AThreeLevelListOfDepartmentDataInterface[]>()

const handleNodeClick = (data: Tree) => {
  // 解构代码和资料
  let { typeName, typeNo } = data
  if (typeNo.length === 1) {
    JMessage.warning('请选择子类')
  } else {
    formList2.value[0].inputValue = typeName
  }

  QueryDateParms.value.mtlNo = typeNo
}

const total = ref(0)

const handleSizeChange = (val: number) => {
  MaterialQueryListParm.value.pageNum = val
  MaterialQueryListKlc()
}
const handleCurrentChange = (val: number) => {
  MaterialQueryListParm.value.pageSize = val
  MaterialQueryListKlc()
}

const Launchform = (row: any) => {
  MaterialQueryListParm.value.typeName = row[0].inputValue
  MaterialQueryListParm.value.mtlName = row[1].inputValue
  MaterialQueryListParm.value.mtlName1 = row[2].inputValue
  MaterialQueryListParm.value.mtlName2 = row[3].inputValue
  MaterialQueryListParm.value.mtlSpec = row[4].inputValue
  MaterialQueryListParm.value.mtlUnit = row[5].inputValue
  MaterialQueryListParm.value.vendor = row[6].selectValue?.split(' ')[0]?.trim()
  MaterialQueryListParm.value.mtlColor = row[7].inputValue
  MaterialQueryListParm.value.mtlNo = row[8].inputValue
  MaterialQueryListKlc()
}

const Launchform1 = (row: any) => {
  QueryDateParms.value.mtlName = row[0].inputValue
  QueryDateParms.value.mtlName = row[1].inputValue
  QueryDateParms.value.mtlSpec = row[2].inputValue
  QueryDateParms.value.mtlColor = row[3].inputValue
  QueryDateParms.value.mtlUnit = row[4].selectValue
  QueryDateParms.value.vendor = row[5].selectValue?.split(' ')[0]?.trim()
  MaterialQueryListKlc()
}

const findData1 = (find: string) => {
  if (find === '插入材料') {
    if (QueryDateParms.value.mtlNo === '' || QueryDateParms.value.mtlName === '' || QueryDateParms.value.mtlUnit === '') {
      JMessage.warning('中类材料名称单位不可为空')
    } else {
      QueryDate()
    }
  }
}

const findData = (find: string) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '删除') {
    handleCloseMateriaLKlc()
  }
}

const clearFormList1 = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}

const clearFormList2 = () => {
  formList2.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}

// 生产
const defaultProps = {
  children: 'children',
  label: 'typeName'
}
</script>

<style lang="less" scoped>
.MainCard {
  width: 100%;
  box-shadow: none;
  margin-top: 15px;
}

.MainCardLeft {
  width: 20%;
}

.MainCardRight {
  width: 67%;
  margin-left: 50px;
  // margin-top: 15px;
}

.MainCardLeftH1 {
  font-size: 16px;
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
}

.MainCardDivMain {
  width: 100%;
  border: 1px solid #e6e6e6;
  margin-left: 10px;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.MainCardRightTop {
  width: 100%;
  padding-top: 80px;
}

.MainCardRightBottom {
  width: 100%;
}

.MainCardRightH1 {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}

.MainBottom {
  display: flex;
  margin-top: 10px;
}

:deep(.el-tree-node__expand-icon.is-leaf) {
  display: none !important;
}

:deep(.el-tree-node__children .el-tree-node__content) {
  margin-left: 7px !important;
}
</style>
